<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='Personal Settings',active='home'">
<header th:replace="admin/fragments/header::headerFragment(${title},${active})"></header>

<body>
    <div id="wrapper">
        <div th:replace="admin/fragments/header::header-body"></div>
        <div class="content-page">
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class="page-title">Profile</h4>
                        </div>

                        <div class="col-md-6">
                            <div class="panel panel-color panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Personal Information</h3>
                                </div>
                                <div class="panel-body">
                                    <form class="form-horizontal" role="form" id="user-form">
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Account</label>
                                            <div class="col-md-9">
                                                <input type="text" th:value="${session.login_user.username}"
                                                    class="form-control" readonly="readonly" disabled="disabled" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Name</label>
                                            <div class="col-md-9">
                                                <input id="screenName" type="text" class="form-control"
                                                    name="screenName" placeholder="Please input your name"
                                                    th:value="${session.login_user.screenName}" required="required"
                                                    aria-required="true" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">E-mail</label>
                                            <div class="col-md-9">
                                                <input id="email" type="text" class="form-control" name="email"
                                                    placeholder="Please input your E-mail"
                                                    th:value="${session.login_user.email}" required="required"
                                                    aria-required="true" />
                                            </div>
                                        </div>
                                        <div class="clearfix pull-right">
                                            <button type="button" class="btn btn-primary waves-effect waves-light"
                                                onclick="saveSetting()">
                                                Save Profile
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="panel panel-color panel-danger">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Change Password</h3>
                                </div>
                                <div class="panel-body">
                                    <form class="form-horizontal" role="form" id="pwd-form">
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Old Password</label>
                                            <div class="col-md-9">
                                                <input type="password" class="form-control" name="oldPassword"
                                                    required="required" aria-required="true" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Input New Password</label>
                                            <div class="col-md-9">
                                                <input type="password" name="newPassword" id="password1"
                                                    class="form-control" required="required" aria-required="true"
                                                    rangelength="[6,14]" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">New Password Again</label>
                                            <div class="col-md-9">
                                                <input type="password" name="repass" class="form-control"
                                                    equalTo="#password1" />
                                            </div>
                                        </div>
                                        <div class="clearfix pull-right">
                                            <button type="submit" class="btn btn-danger waves-effect waves-light">
                                                Set the Password
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div th:replace="admin/fragments/footer :: footer-content"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/fragments/footer :: footer"></div>
    <script th:src="@{//cdn.bootcss.com/jquery-validate/1.15.1/jquery.validate.min.js}"></script>
    <script th:src="@{//cdn.bootcss.com/jquery-validate/1.15.1/localization/messages_zh.min.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        /*<![CDATA[*/
        var tale = new $.tale();

        function saveSetting() {
            var param = $('#user-form').serialize();

            var screenName = $("#screenName").val();
            var email = $("#email").val();

            if (screenName == [[${session.login_user.screenName}]] && email == [[${session.login_user.email}]]) {
                tale.alertError("Nothing changed!");
                return false;
            } else {
                tale.post({
                    url: '/admin/profile',
                    data: param,
                    success: function (result) {
                        if (result && result.code == 'success') {
                            tale.alertOk('Successful!');
                        } else {
                            tale.alertError(result.msg || 'Failed!');
                        }
                    }
                });
            }
        }

        $('#pwd-form').validate({
            submitHandler: function (form) {
                var params = $("#pwd-form").serialize();
                tale.post({
                    url: '/admin/password',
                    data: params,
                    success: function (result) {
                        if (result && result.code == 'success') {
                            tale.alertOk('Successful!');
                        } else {
                            tale.alertError(result.msg || 'Failed!');
                        }
                    }
                });
            }
        });
    /*]]>*/
    </script>
</body>

</html>